/* 这个文件里面放的是 首页的样式 */
.main {
	width: 980px;
	height: 455px;
	/*background-color: orange;*/

	margin-left: 219px;
	margin-top: 10px; 
}

.focus {
	position: relative;
	float: left;
	width: 720px;
	height: 455px;
	/*background-color: pink;*/
}

.newsflash {
	float: right;
	width: 250px;
	height: 455px;
	/*background-color: blue;*/
}

.arrow_l,
.arrow_r {
	position: absolute;
	top: 50%;
	margin-top: -20px;
	width: 24px;
	height: 40px;
	background-color: rgba(0, 0, 0, .3);

	text-align: center;
	line-height: 40px;
	color: #fff;
}


.arrow_r {
	right: 0;
}

.circle {
	position: absolute;
	bottom: 10px;
	left: 50px;
}

/* 绘制小圆圈 */
.circle li {
	float: left;
	width: 8px;
	height: 8px;
	/*background-color: #fff;*/

	margin: 0 3px;
	/* 小圆圈制作，而不是小圆 */
	border: 1px solid #fff;
	border-radius: 50%

	/* 鼠标经过，显示小手 */
	/*cursor: pointer;*/
}

/* 当前所在的圆点 */
.current {
	background-color: #fff;
}


.news {
	height: 163px;
	/* 使用点线 */
	border: 1px dotted #ccc;
	/*background-color: pink;*/
}

.news_bd {
	padding: 10px 0 0 15px;
}

.news_bd li {
	height: 23px;  
}

.news_bd li a {
	/* 字体大小没有设置，还是继承的以前的样式 */
	color: black;
}

.news_hd {
	height: 32px;
	border-bottom: 1px dotted #ccc;
}

.news_hd span {
	line-height: 32px;
	margin: auto 10px; 
	text-align: center;
	color: #ccc;
	padding-left: 50px; 
}

.news_hd a {
	float: right;
	margin-right:5px;
	margin-top: 8px;
}



.lifeservice {
	height: 208px;
	border: 1px solid #ccc;
	/* 避免上边框重叠，不给上边框 */
	border-top: none; 
	/*background-color: orange;	*/
}

.lifeservice li {
	float: left;
	width: 61px;
	height: 69px;
	/* 每个li只给 下右 边框 */
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

/* 这点和老师写的不一样，我是按照cf官网 下载游戏那一行的写法，也是使用精灵图 */
.lifeservice li a{
	display: block;
	height: 26px;

	line-height: 17px;
	text-align: center;
	padding-top: 44px; 

	/* 子绝父相 */
	position: relative;
}

/* 定义每个精灵图共有 */
.lifeservice li em {
	position: absolute;
	top: 12px;
	left: 19px;
	width: 24px;
	height: 24px;
	/*background-color: pink; */

	/* 背景 */
	background-image: url(../img/icons.png);
	background-repeat: no-repeat; 
}

/* 每个的位置给出来 */
.bg_1 em {
	background-position: -17px -16px;
}

.bg_2 em {
	background-position: -78px -16px;
}

/* 小图标，减价 */
.bg_2 i {
	position: absolute;
	right: 0;
	top: 0;
	width: 12px;
	height: 15px;
	background: url(../img/jian.jpg) no-repeat; 
}

.bg_3 em {
	background-position: -78px -16px;
}

.bg_4 em {
	background-position: -78px -16px;
}

.bg_5 em {
	background-position: -78px -16px;
}
.bg_6 em {
	background-position: -78px -16px;
}
.bg_7 em {
	background-position: -78px -16px;
}
.bg_8 em {
	background-position: -78px -16px;
}
.bg_9 em {
	background-position: -78px -16px;
}
.bg_10 em {
	background-position: -78px -16px;
}
.bg_11 em {
	background-position: -78px -16px;
}
.bg_12 em {
	background-position: -78px -16px;
}



.service_ico {
	display: block;
	width: 24px;
	height: 24px;
	background-color: pink;
	margin: 10px 
}

.bargain {
	height: 80px;
	border: 1px solid #ccc;
	border-top: none;
	background: url(../uploads/bargain.jpg);

}


/* 推荐模块 */
.recommend {
	height: 163px;
	margin-top: 10px;
	background-color: pink;
}

.recommend_hd {
	float:  left;
	width: 200px;
	height: 163px;
	background-color: #5c5251;

	text-align: center;
}

.recommend_hd img {
	margin: 30px 0 10px 0;
}

.recommend_hd h3 {
	font-size: 18px;
	color: #fff;
	/* 不加粗 */
	font-weight: 400;
}

.recommend_bd {
	float:  left;
	width: 1000px;
	height: 163px;
	background-color: #ebebeb;
}

.recommend_bd li {
	float: left;
	margin-top: 10px;
	width: 249px;
	border-right: 1px solid #ccc;
	height: 145px;
}

.recommend_bd .last {
	border: none;
}


/* 下面写电梯导航的模块 向手机通讯，电脑办公这些都是一样的，
模块结构都是一样的， 我们定义出来一些公共的样式，让这些模块一起使用就行了*/

.box_hd {
	height: 30px;
	/*background-color: pink;*/
	border-bottom: 2px solid #c81623;
	margin-top: 25px;
}

.box_hd h3 {
	float: left;
	font-size: 18px;
	color: #c81623;
}

.tab_list {
	float: right;
	line-height: 30px;
}

.tab_list li {
	float: left;
	color: #ccc;

}

.tab_list li a {
	margin: 0 15px;
}

.tab_list .red_a {
	color: #c81623;
}
.box_bd {
	height: 360px;
	/*background-color: orange;*/
}

.tab_con li {
	float: left;
	height: 360px;
	/* 下面transition， 会压到边框不显示边框，这里隐藏掉超出部分 */
	overflow: hidden;
}

/* 给box_bd 每个里面的小盒子宽 */
.w209 {
	width: 209px;
	
}

.w329 {
	width: 329px;

}

.w219 {
	width: 219px;
	border-right: 1px solid #ccc;
}

/* 显示不出来边框的原因是，内部图片太大了，盖住了边框大概是这样，把盒子width放大点，就可以看到 */

.w219d {
	width: 220px;
	border-right: 1px solid #ccc;
}

.w220 {
	width: 220px;
	border-right: 1px solid #ccc;	
}

.tab_con_item {
	border-bottom: 1px solid #ccc;
}

/*.tab_con_item_c {
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}*/

.w209 {
	background-color: #f9f9f9;
}

.tab_con_list {
	/* 这个盒子没有高，孩子又是浮动的，所以我们要清楚浮动，否则给margin值，也不起作用 */
	margin-bottom: 15px;
}

.tab_con_list li{
	width: 86px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	overflow: hidden;

	border-bottom: 1px solid #ccc;
	margin-left: 12px;
}

.box_bd img {
	transition: all 0.2s;
}

/* 鼠标经过图片，往右走8px */
.box_bd img:hover {
	margin-left: 8px;
}

/* 电梯导航 */
.fixedtool {
	position: fixed;
	top: 184px;

	/* 始终在 版心的左边： 左走50%， 再回来版心的一半 -600px，再左走盒子的宽度 -66px */
	left: 50%;
	margin-left: -676px;
		
	width: 66px;
	background-color: #fff;
	z-index: 999;
}

.fixedtool li {
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 12px;

	border-bottom: 1px solid #ccc;
}

.fixedtool li a {
	display: block;
	width: 100%;
	height: 100%;
}


.fixedtool a:hover {
	background-color: #ccc;
	font-size: 14px;
	color: yellow;
}